<template>
    <div>
        <Meta-Dialog
            v-model="isShow"
            width="560"
            :modal="true"
            class="bg-primarylight dialog-header-bg"
            header-class="pl-[0] pb-[0]"
            body-class="bg-img1 rounded-md py-[5px]"
        >
            <template #header>
                <div class="flex items-center f-1 mr-[10px] h-[49px]">
                    <img
                        src="../../../assets/img-logo.png"
                        class="max-w-[39px] ml-[16px]"
                        alt=""
                    />
                    <span class="text-primary text-[20px] ml-[10px]"
                        >天钥智能主检引擎</span
                    >
                </div>
            </template>

            <div class="px-[10px]">
                <div
                    class="flex items-center justify-around bg-white h-[60px] pt-[5px] pb-[20px] rounded-md text-[16px]"
                >
                    <div class="flex-[1] shrink-0 ml-[10px]">
                        <span>姓名：</span><span>王麦子</span>
                    </div>
                    <div class="w-[100px] shrink-0">
                        <span>性别：</span><span>女</span>
                    </div>
                    <div class="w-[100px] shrink-0">
                        <span>年龄：</span><span>22</span>
                    </div>
                    <div class="flex-[1] shrink-0">
                        <span>体检号：</span><span>2387697</span>
                    </div>
                </div>

                <!-- 总检结论操作 -->
                <div
                    class="flex items-center justify-between pl-[5px] py-[5px] pt-[10px]"
                >
                    <div class="flex items-center">
                        <el-checkbox
                            class="mr-[10px]"
                            v-model="allChecked"
                        ></el-checkbox>
                        <span class="font-semibold mr-[5px]">总检结论</span>
                        <el-button
                            class="text-primary"
                            text
                            size="small"
                            @click="doAllToggle"
                            >{{ toggleOpen ? '收起全部' : '展开全部'
                            }}<span
                                class="icon-[teenyicons--down-small-outline] transform text-[18px]"
                                :class="toggleOpen ? '' : ' rotate-180'"
                            ></span
                        ></el-button>
                    </div>

                    <div>
                        <el-button
                            plain
                            size="small"
                            type="primary"
                            @click="doAdd(undefined)"
                            >新增结果</el-button
                        >
                        <el-button
                            plain
                            size="small"
                            type="primary"
                            @click="doFanKui"
                            >反馈</el-button
                        >
                        <el-button
                            plain
                            size="small"
                            type="primary"
                            @click="doMerge"
                            >合并</el-button
                        >
                        <el-dropdown
                            class="ml-[10px]"
                            size="small"
                            @command="doCopy"
                        >
                            <el-button
                                class="outline-none"
                                type="primary"
                                size="small"
                            >
                                复制
                                <el-icon> <arrow-down /> </el-icon
                            ></el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="all"
                                        >复制全部</el-dropdown-item
                                    >
                                    <el-dropdown-item command="result"
                                        >复制体检结果</el-dropdown-item
                                    >
                                    <el-dropdown-item command="healthy"
                                        >复制健康建议</el-dropdown-item
                                    >
                                    <el-dropdown-item command="judge"
                                        >复制判断依据</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>

                <!-- 体检各项 -->
                <div
                    class="rounded-md px-[3px] pt-[5px] max-h-[700px] overflow-y-auto overflow-x-hidden"
                >
                    <!-- card -->
                    <draggable
                        v-model="list"
                        item-key="id"
                        :handle="'.drag-handle'"
                        :filter="'.no-drag'"
                        :prevent-on-filter="false"
                    >
                        <div
                            v-for="(item, index) in list"
                            class="border border-bordergraylight rounded-md overflow-hidden mb-[6px] shadow-[3px_3px_5px_0px_rgba(15,64,245,0.15)]"
                        >
                            <!-- card-header -->
                            <div
                                class="drag-handle bg-white flex justify-between px-[8px] py-[5px] border-b border-b-bordergraylight"
                            >
                                <div class="flex items-center flex-1">
                                    <span
                                        class="icon-[material-symbols--drag-pan] text-primary text-[22px] mr-[5px]"
                                    ></span>
                                    <el-checkbox
                                        class="mr-[15px]"
                                        v-model="item.isChecked"
                                    ></el-checkbox>
                                    <template v-if="item.isEdit">
                                        <div
                                            class="no-drag flex items-center font-semibold mr-[5px] flex-1 px-[10px]"
                                        >
                                            {{ index + 1 }}.<el-input
                                                v-model="item.title"
                                            ></el-input>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div
                                            class="no-drag font-semibold mr-[5px] px-[10px]"
                                        >
                                            {{ index + 1 }}.{{ item.title }}
                                        </div>
                                    </template>
                                </div>
                                <div
                                    class="text-primary flex items-center ml-[10px]"
                                >
                                    <span
                                        class="cursor-pointer shrink-0"
                                        @click="doEdit(item)"
                                        >{{
                                            item.isEdit ? '保存' : '编辑'
                                        }}</span
                                    >
                                    <span
                                        v-if="item.isEdit"
                                        class="ml-[5px] cursor-pointer shrink-0"
                                        @click="doCancel(item)"
                                        >取消</span
                                    >
                                    <span
                                        class="icon-[teenyicons--down-small-outline] transform text-[26px] cursor-pointer ml-[5px]"
                                        :class="{ 'rotate-180': item.isOpen }"
                                        @click="item.isOpen = !item.isOpen"
                                    ></span>
                                </div>
                            </div>

                            <!-- card-content -->
                            <div
                                class="overflow-hidden bg-white"
                                :class="{ 'h-0': !item.isOpen }"
                            >
                                <MetaForm
                                    :formData="item.formData"
                                    :formColumn="item.formColumn"
                                    :labelWidth="70"
                                    labelPosition="right"
                                    class="mx-[7px] mt-[10px] -mb-[10px]"
                                >
                                </MetaForm>
                                <!-- card-footer -->
                                <div
                                    class="bg-white text-[12px] flex pr-[10px] py-[5px] border-t border-t-gray leading-[14px]"
                                >
                                    <div class="w-[70px] text-right shrink-0">
                                        判断依据:
                                    </div>
                                    <div class="flex-1 leading-[16px] pl-[5px]">
                                        {{ item.formData.basisForJudgment }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </draggable>
                </div>
            </div>
        </Meta-Dialog>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { computed, ref, watch } from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
import useClipboard from 'vue-clipboard3'

// 初始化剪贴板工具
const { toClipboard } = useClipboard()

const isShow = ref(false)
const allChecked = ref(true)
const toggleOpen = ref(true)

const emits = defineEmits(['openFanKui', 'openEdit'])

const list = ref([
    {
        id: 1,
        title: '彩超:脂肪肝:CT:脂肪肝',
        isOpen: true,
        isChecked: true,
        isEdit: false,
        formData: {
            healthAdvice:
                '啊流口水借记卡束带结发，我吃少阿斯蒂芬金卡合适的付款合计看哈刷卡机等哈飞机很大说法阿圣诞节康卡斯东方航空手打，啊哈东方闪电',
            popularScienceExplanation: '阿克苏经典复刻啦第三方立卡',
            basisForJudgment:
                '啊可视对讲罚款垃圾毒素发啦啊可视对讲罚款垃圾毒素发啦啊可视对讲罚款垃圾毒素发啦啊可视对讲罚款垃圾毒素发啦啊可视对讲罚款垃圾毒素发啦'
        },
        formColumn: [
            {
                prop: 'healthAdvice',
                label: '健康建议',
                componentName: 'plaintext',
                type: 'textarea',
                istrim: false,
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                span: 24
            },
            {
                prop: 'popularScienceExplanation',
                label: '科普说明',
                componentName: 'plaintext',
                type: 'textarea',
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                istrim: false,
                span: 24
            }
        ]
    },
    {
        id: 2,
        title: '彩超:脂肪肝:CT:脂肪肝2',
        isOpen: true,
        isChecked: true,
        isEdit: false,
        formData: {
            healthAdvice: '啊山东科技分开了',
            popularScienceExplanation: '啊萨德发生的',
            basisForJudgment: '阿斯蒂芬金坷垃饿死'
        },
        formColumn: [
            {
                prop: 'healthAdvice',
                label: '健康建议',
                componentName: 'plaintext',
                type: 'textarea',
                istrim: false,
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                span: 24
            },
            {
                prop: 'popularScienceExplanation',
                label: '科普说明',
                componentName: 'plaintext',
                type: 'textarea',
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                istrim: false,
                span: 24
            }
        ]
    },
    {
        id: 3,
        title: '彩超:脂肪肝:CT:脂肪肝3',
        isOpen: true,
        isChecked: false,
        isEdit: false,
        formData: {
            healthAdvice: '快乐健康垃圾筐打扫房间',
            popularScienceExplanation: '哦我耳机孔金卡水电费',
            basisForJudgment: '阿迪斯放假啦时代峰峻'
        },
        formColumn: [
            {
                prop: 'healthAdvice',
                label: '健康建议',
                componentName: 'plaintext',
                type: 'textarea',
                istrim: false,
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                span: 24
            },
            {
                prop: 'popularScienceExplanation',
                label: '科普说明',
                componentName: 'plaintext',
                type: 'textarea',
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                istrim: false,
                span: 24
            }
        ]
    }
])

// 展开、收起全部
const doAllToggle = () => {
    toggleOpen.value = !toggleOpen.value
    list.value.forEach((i) => (i.isOpen = toggleOpen.value))
}

// 已勾选的选项
const checkedList = computed(() => {
    return list.value.filter((i) => i.isChecked)
})

// 反馈
const doFanKui = () => {
    emits('openFanKui', checkedList.value)
}

// 新增结果
const doAdd = () => {
    emits('openEdit')
}

// 合并
const doMerge = () => {
    const data = {
        result: '',
        healthAdvice: '',
        popularScienceExplanation: '',
        basisForJudgment: ''
    }
    checkedList.value.forEach((i, index) => {
        data.result += i.title
        data.healthAdvice +=
            i.formData.healthAdvice +
            (index >= checkedList.value.length - 1 ? '' : '\n')
        data.popularScienceExplanation +=
            i.formData.popularScienceExplanation +
            (index >= checkedList.value.length - 1 ? '' : '\n')
        data.basisForJudgment +=
            i.formData.basisForJudgment +
            (index >= checkedList.value.length - 1 ? '' : '\n')
    })
    emits('openEdit', data)
}

// 编辑单个体检结果
const doEdit = (item) => {
    item.isEdit = !item.isEdit
    if (!item.isEdit) {
        item.formColumn = [
            {
                prop: 'healthAdvice',
                label: '健康建议',
                componentName: 'plaintext',
                type: 'textarea',
                istrim: false,
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                span: 24
            },
            {
                prop: 'popularScienceExplanation',
                label: '科普说明',
                componentName: 'plaintext',
                type: 'textarea',
                style: {
                    'white-space': 'pre-line',
                    'line-height': '18px'
                },
                istrim: false,
                span: 24
            }
        ]
        // 保存
    } else {
        // 编辑
        item.formColumn = [
            {
                prop: 'healthAdvice',
                label: '健康建议',
                componentName: 'input',
                type: 'textarea',
                istrim: false,
                span: 24
            },
            {
                prop: 'popularScienceExplanation',
                label: '科普说明',
                componentName: 'input',
                type: 'textarea',
                istrim: false,
                span: 24
            }
        ]
    }
}

// 取消
const doCancel = (item) => {
    item.isEdit = false
    item.formColumn = [
        {
            prop: 'healthAdvice',
            label: '健康建议',
            componentName: 'plaintext',
            type: 'textarea',
            istrim: false,
            style: {
                'white-space': 'pre-line',
                'line-height': '18px'
            },
            span: 24
        },
        {
            prop: 'popularScienceExplanation',
            label: '科普说明',
            componentName: 'plaintext',
            type: 'textarea',
            style: {
                'white-space': 'pre-line',
                'line-height': '18px'
            },
            istrim: false,
            span: 24
        }
    ]
}

// 复制
const doCopy = async (command) => {
    if (!checkedList.value?.length) {
        ElMessage.error('请选择需要复制的数据')
        return
    }
    let text = ''
    // 执行复制操作
    checkedList.value.forEach((i, index) => {
        switch (command) {
            case 'all':
                // 复制全部
                text += i.title + '\n'
                text += i.formData.healthAdvice + '\n'
                text +=
                    i.formData.basisForJudgment +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'result':
                // 复制结果
                text +=
                    i.title +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'healthy':
                // 复制健康建议
                text +=
                    i.formData.healthAdvice +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'judge':
                // 复制判断依据
                text +=
                    i.formData.basisForJudgment +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
        }
    })

    try {
        await toClipboard(text)
        // 复制成功
        ElMessage.success('复制成功')
    } catch (error) {
        // 复制失败
        console.log(error)
        ElMessage.error('复制失败')
    }
}

watch(
    () => allChecked.value,
    () => {
        list.value.forEach((i) => (i.isChecked = allChecked.value))
    }
)
</script>

<style lang="scss">
.bg-img1 {
    background: url(../../../assets/bg-header-img1.png) top left no-repeat;
    background: url(../../../assets/bg-img1.png) top left no-repeat;
    background-size: 100%;
}
.drag-handle:hover {
    cursor: move;
    .no-drag:hover {
        cursor: default;
    }
}
</style>
